<template>
	<view class="container">
		<view class="card">
			<view class="title"><view class="name">新建应急广播</view></view>
			<view v-if="voicePath" @click="playRecord" class="play flex-row">
				<image :src="image"></image>
			</view>
			<view v-else @touchstart="startRecord" @touchend="endRecord" class="sound">{{ soundText }}</view>
			<view class="item flex-row">
				<view class="label">全区广播设备同步播放此语音</view>
				<view class="input flex-row">
					<picker @change="changeSync" :value="form.is_tongbu" :range="options">
						<view class="value">{{ options[form.is_tongbu] }}</view>
					</picker>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="item flex-row" style="margin: 20upx 0;">
				<view class="label">是否循环播放</view>
				<view class="input flex-row">
					<picker @change="changeLoop" :value="form.is_loop" :range="options">
						<view class="value">{{ options[form.is_loop] }}</view>
					</picker>
					<uni-icons type="arrowdown" size="16" color="#666"></uni-icons>
				</view>
			</view>
			<view class="btns">
				<view @click="submit" class="btn">提交</view>
			</view>
		</view>
	</view>
</template>

<script>
import uniIcons from '@/components/uni-icons/uni-icons.vue';

// 录音对象
const recorderManager = uni.getRecorderManager();
const innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;

export default{
	components: { uniIcons },
	data(){
		return {
			image: '../../../static/play.png',
			soundText: '按住 说话',
			options: ['否', '是'],
			voicePath: '',
			form: {
				userid: uni.getStorageSync('userid'),
				is_loop: 0,
				is_tongbu: 0,
				url: ''
			}
		}
	},
	onLoad(){
		let _this = this;
		recorderManager.onStop((res)=>{
			_this.uploadRecord(res.tempFilePath)
		});
		innerAudioContext.onEnded(()=>{
			_this.image = '../../../static/play.png';
		})
	},
	methods: {
		// 提交
		submit(){
			if(!this.form.url){
				return uni.showToast({ icon: 'none', title: '请添加应急广播录音' });
			}
			
			uni.showLoading({ title: '加载中' });
			uni.request({
				url: this.$API.emergencyBroadcastAdd,
				data: this.form,
				method: 'POST',
				header: this.$API.get_head(),
				success: (res)=>{
					uni.hideLoading();
					if(res.data.code == 0){
						uni.navigateBack();
					}else{
						uni.showToast({ icon: 'none', title: '上传失败' });
					}
				},
				fail: ()=>{
					uni.hideLoading();
					uni.showToast({ icon: 'none', title: '上传失败' });
				}
			})
		},
		// 切换同步
		changeSync(e){
			this.form.is_tongbu = e.detail.value;
		},
		// 切换循环
		changeLoop(e){
			this.form.is_loop = e.detail.value;
		},
		// 开始录音
		startRecord(){
			this.soundText = '松开 结束录制';
			recorderManager.start({
				format: 'mp3'
			});
		},
		// 结束录音
		endRecord(){
			this.soundText = '松开 说话';
			recorderManager.stop();
		},
		// 播放录音
		playRecord(){
			this.image = '../../../static/voice.gif';
			innerAudioContext.src = this.form.url;
			innerAudioContext.play();
		},
		// 上传录音
		uploadRecord(filePath){
			let _this = this;
			uni.showLoading({title: '上传中'});
			uni.uploadFile({
				url: _this.$API.upload,
				name: 'file',
				filePath: filePath,
				success: function(res) {
					uni.hideLoading();
					res.data = JSON.parse(res.data);
					_this.voicePath = filePath;
					_this.form.url = _this.$API.baseURL + res.data.fileName;
				},
				fail(){
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '上传失败'
					})
				}
			});
		}
	}
}
</script>

<style scoped>
.container{
	height: 100vh;
	padding: 20upx;
	box-sizing: border-box;
}

.sound{
	height: 72upx;
	line-height: 72upx;
	background: #eee;
	border-radius: 10upx;
	margin: 20upx 0;
	color: #666;
	font-size: 28upx;
	text-align: center;
	border: 1px solid #ccc;
	box-shadow: 0 0 4upx #eee;
}

.play{
	width: 200upx;
	height: 76upx;
	margin: 20upx 0;
	padding: 0 20upx;
	line-height: 76upx;
	border-radius: 10upx;
	background-color: #eee;
}
.play image{
	width: 60upx;
	height: 60upx;
}

/*卡片*/
.card{
	height: 100%;
	box-sizing: border-box;
	border-radius: 16upx;
	padding: 14upx 20upx 8upx;
	border: 2upx solid #F6F6F6;
	box-shadow: 0 0 4upx #eee;
	background-color: #fff;
	position: relative;
}
.card .title{
	margin-bottom: 6upx;
}
.card .title view{
	height: 42upx;
	font-size: 28upx;
}
.card .title view.name{
	text-indent: 20upx;
	position: relative;
}
.card .title view.name::before{
	content: '';
	width: 10upx;
	height: 26upx;
	background: #5F96F2;
	border-radius: 4upx;
	position: absolute;
	top: 14upx;
	left: 0;
}
.card .item{
	font-size: 30upx;
}
.card .item .label{
	width: calc(100% - 240upx);
	font-size: 30upx;
}
.card .item .input{
	width: 240upx;
	height: 68upx;
	line-height: 68upx;
	padding: 0 20upx;
	background: #F2F2F2;
	border-radius: 12upx;
	box-sizing: border-box;
	text-align: center;
}
.card .item  picker{
	width: 100%;
}
.card .item .value{
	height: 68upx;
	line-height: 68upx;
	font-size: 30upx;
}

.btns{
	padding: 200upx 40upx 0;
}
.btns .btn{
	color: #fff;
	width: 240upx;
	height: 52upx;
	font-size: 26upx;
	line-height: 52upx;
	border-radius: 6upx;
	text-align: center;
	margin: 0 auto;
	background-color: #5F96F2;
}

</style>
